<!-- 质押数据 -->
<template>

  <div class="pag" >
    <div class="banner">
      <h3>{{ new Date() | toDate }}数据信息</h3>
    </div>
    <div class="data" style="background:linear-gradient(-30deg,rgba(126,147,197,1),rgba(51,76,139,1));">
      <div class="data-title">
        <label>今日质押详情</label>
        <label>总额：{{ todayPledgeTotal.toFixed(0)   | numAddSep}}</label>
      </div>
      <div class="data-content">
        <div>
          <div>{{ todayPledgeRouter.toFixed(0)   | numAddSep}}</div>
          路由器
        </div>
        <p class="s-split"></p>
        <div>
          <div>{{  todayPledgePC.toFixed(0)   | numAddSep}}</div>
          客户端
        </div>
        <p class="s-split"></p>
        <div>
          <div>{{  todayPledgeLinux.toFixed(0)   | numAddSep}}</div>
          Linux
        </div>
      </div>
    </div>
    <div class="data" style="background:linear-gradient(-30deg,rgba(212,172,173,1),rgba(167,120,122,1));">
      <div class="data-title">
        <label>今日质押提取详情</label>
        <label>总额：{{ todayPledgeRedemptionTotal.toFixed(0)    | numAddSep}}</label>
      </div>
      <div class="data-content">
        <div>
          <div>{{  todayPledgeRedemptionRouter.toFixed(0)   | numAddSep}}</div>
          路由器
        </div>
        <p class="s-split"></p>
        <div>
          <div>{{  todayPledgeRedemptionPC.toFixed(0)   | numAddSep}}</div>
          客户端
        </div>
        <p class="s-split"></p>
        <div>
          <div> {{  todayPledgeRedemptionLinux.toFixed(0)   | numAddSep}} </div>
          Linux
        </div>
      </div>
    </div>
    <div class="today">
      <label>今日净质押总额</label>
      <label :class="{sub: todayPledgeTotalNum<0,add: todayPledgeTotalNum>0}">{{ todayPledgeTotalNum.toFixed(0)   | numAddSep}}</label>
    </div>
    <div class="data" style="background:linear-gradient(-30deg,rgba(38,189,242,1),rgba(32,106,254,1));">
      <div class="data-title">
        <label>累计质押详情</label>
        <label>总额：{{ pledgeTotal.toFixed(0)   | numAddSep}}</label>
      </div>
      <div class="data-content">
        <div>
          <div>{{ pledgeRouter.toFixed(0)  | numAddSep}}</div>
          路由器
        </div>
        <p class="s-split"></p>
        <div>
          <div>{{ pledgePC.toFixed(0)  | numAddSep}}</div>
          客户端
        </div>
        <p class="s-split"></p>
        <div>
          <div>{{ pledgeLinux.toFixed(0)  | numAddSep}}</div>
          Linux
        </div>
      </div>
    </div>
  </div>

</template>

<script>
    import {getViewUser, getViewCvnt, getViewPledge } from 'api/index'
    import {Num} from 'common/js/utl'

    export default {
        data() {
            return {
                "todayPledgeRouter": 0,
                "todayPledgePC": 0,
                "todayPledgeLinux": 0,
                "todayPledgeRedemptionRouter": 0,
                "todayPledgeRedemptionPC": 0,
                "todayPledgeRedemptionLinux": 0,
                "pledgeRouter": 0,
                "pledgePC": 0,
                "pledgeLinux": 0
            }
        },
        beforeRouteEnter (to, from, next) {
            next((vm) => {
                vm.getData()
            })
        },
        computed: {
            pledgeTotal(){
                let {pledgeRouter, pledgePC, pledgeLinux} = this
              return Num.add(Num.add(pledgeRouter, pledgePC), pledgeLinux)
            },
            todayPledgeRedemptionTotal(){
                let {todayPledgeRedemptionRouter, todayPledgeRedemptionPC, todayPledgeRedemptionLinux} = this
                return Num.add(Num.add(todayPledgeRedemptionRouter, todayPledgeRedemptionPC), todayPledgeRedemptionLinux)
            },
            todayPledgeTotal(){
                let {todayPledgeRouter, todayPledgePC, todayPledgeLinux} = this
                return Num.add(Num.add(todayPledgeRouter, todayPledgePC), todayPledgeLinux)
            },
            todayPledgeTotalNum(){
                let {todayPledgeTotal, todayPledgeRedemptionTotal} = this
                return Num.sub(todayPledgeTotal, todayPledgeRedemptionTotal)
            },
        },
        methods: {
            async getData() {
                let {data} = await getViewPledge({
                    t: Date.now()
                })
                Object.assign(this, data)
            }
        }
    }
</script>

<style lang="scss" scoped>
  @import "~common/scss/variable";
  @import "~common/scss/mixin";

  .pag {
    color: #fff;
    font-size: 36px;
    overflow-x: hidden;
  }

  .banner {
    //width:750px;
    height:310px;
    background:linear-gradient(210deg,rgba(10,29,87,1),rgba(24,63,143,1));
    margin-bottom: -170px;
    h3 {
      padding: 50px 0 0 29px;
      font-size:42px;
      font-weight:600;
      color:rgba(255,255,255,1);
    }
  }

  .data {
    margin: 0 30px 24px 30px;
    width:690px;
    height:340px;
    border-radius:14px;
    &-title {
      height: 110px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 47px;
      label{
        font-weight: 600;
        &:last-of-type {
          font-size: 30px;
        }
      }
    }
    &-content {
      height: calc(100% - 110px);
      margin: 0 24px;
      padding: 40px 0;
      display: flex;
      align-items: center;
      border-top: 2px solid rgba(255, 255, 255, .2);
      > div {
        flex: 1;
        font-size: 30px;
        color:rgba(255,255,255,.5);
        text-align: center;
        div {
          font-size:36px;
          font-weight:600;
          color:rgba(255,255,255,1);
          margin-bottom: 29px;
          word-break: break-all;
        }
      }
      .s-split {
        width:2px;
        height:148px;
        background:rgba(255,255,255,1);
        opacity:0.2;
      }
    }
  }

  .today {
    margin: 0 30px 24px 30px;
    height:140px;
    background:rgba(105,127,181,1);
    border-radius:10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 23px;
    font-size: 30px;
    label {
      &:last-of-type {
        font-size: 42px;
        font-weight: 600;
        display: flex;
        align-items: center;
      }
      &.sub{
        &:before {
          content: '-';
          color: #FE8B7F;
          display: inline;
        }
      }
      &.add{
        &:before {
          content: '+';
          display: inline;
        }
      }
    }
  }



</style>
















